<template>
	<view>
		<map
			id="map"
			:latitude="latitude"
			:longitude="longitude"
			class="map-nvue-container"
			:controls="controls"
			:scale="scale"
			@regionchange="onRegionChange"
		>
		</map>
	</view>
</template>

<script>
const { windowWidth, windowHeight } = uni.getSystemInfoSync();
export default {
	data() {
		return {
			latitude: 0,
			longitude: 0,
			latitudeLength: 85390,
			longitudeLength: 111000,
			earthRadius: 6378.137,
			scale: 16,
			getLocationStatus: false,
			windowWidth: '',
			windowHeight: '',
			controls: [],
			markers: [],
			mapChangeIndex: 0
		};
	},
	async onReady() {
		let sysinfo = await uni.getSystemInfo();
		this.windowHeight = sysinfo[1].windowHeight;
		this.windowWidth = sysinfo[1].windowWidth;
		this.controls.push({
			id: 10001, // 中心点
			position: {
				left: this.windowWidth / 2-12,
				top: this.windowHeight / 2 -12-50,
				width: 24,
				height: 24
			},
			iconPath: 'https://upload-images.jianshu.io/upload_images/2206137-3a157cd514a530fd.png?imageMogr2/auto-orient/strip|imageView2/2/w/64/format/webp',
			clickable: true
		});
	},
	onLoad() {
		this.getUserLocation();
	},
	onNavigationBarButtonTap(e) {
	    console.log("success",this.latitude)
		console.log("success",this.longitude)
		uni.$emit('get_long_lati',{
			latitude:this.latitude,
			longitude:this.longitude
		});
		uni.navigateBack()
	},
	methods: {
		getInit() {
			const that = this;
			post('Bbs/ApiInfo/GetSiteInfo', {}).then(res => {
				that.oldMarkers = res.result;
				that.getRange();
			});
		},
		//计算附近点位信息
		getRange() {
			const that = this;
			let lists = [];
			for (let item = 0; item < that.oldMarkers.length; item++) {
				// console.log(item,that.latitude, that.longitude)
				let isComputer = that.rangeComputer(that.latitude, that.longitude, that.oldMarkers[item].latitude, that.oldMarkers[item].longitude, 0.5);

				if (isComputer) {
					lists.push(that.oldMarkers[item]);
				}
			}
			that.markers = lists;
		},
		//中心点移动事件
		onRegionChange(e) {
			const that = this;
			let map = uni.createMapContext('map');
			map.getCenterLocation({
				success: res => {
					that.latitude = res.latitude;
					that.longitude = res.longitude;
					// that.getRange();
				},
				fail: () => {
					uni.showToast({
						title: '获取定位失败',
						icon: 'none'
					});
				},
				complete: () => {
					that.getLocationStatus = false;
				}
			});
		},
		/**
		 * 范围计算
		 * @param {Object} userLatitude 用户维度
		 * @param {Object} userLongitude 用户经度
		 * @param {Object} latitude 维度
		 * @param {Object} longitude 经度
		 * @param {Object} range 范围
		 */
		rangeComputer(userLatitude, userLongitude, latitude, longitude, range = 2) {
			if (isNaN(range)) {
				return Error('错误的距离参数');
			}
			const radUserLatitude = this.rad(userLatitude);
			const radLatitude = this.rad(latitude);
			const x = this.rad(userLongitude) - this.rad(longitude);
			const y = radUserLatitude - radLatitude;

			if (this.distanceComputer(x, y, radUserLatitude, radLatitude) <= range) {
				return true;
			} else {
				return false;
			}
		},
		/**
		 * 距离计算
		 * @param {Object} x
		 * @param {Object} y
		 */
		distanceComputer(x, y, userLatitude, latitude) {
			const radLength = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(y / 2), 2) + Math.cos(userLatitude) * Math.cos(latitude) * Math.pow(Math.sin(x / 2), 2)));
			//console.log('原始值:',radLength)
			//console.log('计算后的值:',radLength * this.earthRadius)
			return radLength * this.earthRadius;
		},
		/**
		 * 根据曲率计算
		 * @param {Object} d
		 */
		rad(d) {
			return (d * Math.PI) / 180.0;
		},
		//获取用户位置
		getUserLocation() {
			const that = this;
			if (that.getLocationStatus) {
				uni.showToast({
					title: '获取定位尚未完成',
					position: 'bottom',
					icon: 'none'
				});
				return;
			}
			uni.showToast({
				title: '正在获取用户定位...', //that.$lang.get(that.$lang.language.getUserLocation),
				position: 'bottom',
				icon: 'none'
			});
			that.getLocationStatus = true;
			uni.getLocation({
				type: 'gcj02',
				success: res => {
					that.latitude = res.latitude;
					that.longitude = res.longitude;
					let map = uni.createMapContext('map');
					map.moveToLocation({
						longitude: res.longitude,
						latitude: res.latitude
					});
					that.getInit();
				},
				fail: () => {
					uni.showToast({
						title: '获取定位失败',
						icon: 'none'
					});
				},
				complete: () => {
					that.getLocationStatus = false;
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.map-nvue-container {
	width: 100%;
	height: calc(100vh);
	position: relative;
}
.coverIcon {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate3d(-50%, -50%, 0);
	height: 20rpx;
	width: 20rpx;
	text[class^='cuIcon-'] {
		font-size: 60px;
	}
}
</style>
